<style>
	#app{
	    	background: #cdcdcd;
	}
	.conTable{
		height: 250px;
		color: #223a5c;
	}
	table{
		width: 800px;
		line-height: 27px;
		text-align: center;
		margin: auto;
		padding-top: 20px;
	}
	.pading{
		display: flex;
		justify-content: right;
		font-size: 18px;
		font-weight: bold;
		padding-right: 20px;
		background: #d2d8d6;
	}
	.pading>div:first-child,.pading>div:last-child{
		width: 80px;
		font-size: 14px;
		background: #ebb470;
		margin-right: 6px;
		margin-left: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pading>div:first-child:hover,.pading>div:last-child:hover{
		background: #eaeaea;
	}
	.pages{
		display: flex;
	}
	.active{
		width: 25px;
		height: 25px;
		border: 2px solid #020202;
		border-radius: 5px;
		margin: 0 2px;
		text-align: center;
		color: #f00;
	}
	.acv{
		width: 25px;
		height: 25px;
		border: 2px solid #eaeaea;
		background: #40472b;
		border-radius: 5px;
		margin: 0 2px;
		text-align: center;
		color: #fff;
	}

</style>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<div id="app">
	<div class="conTable">
		<table>
			<tr>
				<th>ID</th>
				<th>数量</th>
				<th>分类</th>
				<th>开始时间</th>
				<th>结束时间</th>
			</tr>
			<tr v-for="item in pageNumber" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.number}}</td>
				<td>{{item.classification}}</td>
				<td>{{item.startTime}}</td>
				<td>{{item.endTime}}</td>
			</tr>
		</table>
	</div>
	<div class="pading">
		<div class="pravPage" @click="pravPage">上一页</div>
		<div class="pages" v-for="(item, index) in pageCount" @click="page(item)">
			<div :class="item==pageNum ? 'acv':'active'" >{{item}}</div>
		</div>
		<div class="nextPage" @click="nexTpage">下一页</div>
	</div>
</div>


<script>
	new Vue({
		el: '#app',
		data() {
			return {
				pageNum: 1, // 页码
				pageSize: 5, // 每页显示5条数据
				pageCount: '', // 总页数
				pageNumber:[], // 处理后用于展示的数据
				paging: [{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
					{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' },
				],
			}
		},
		created(){
			this.pageCount = Math.ceil(this.paging.length/this.pageSize);
			// Math.ceil(向上取整) Math.floor(向下取整)
			this.page(this.pageNum)
		},
		methods: {
			page(item){ //当前页
				this.pageNum = item
				// pageNum=1 => 0第一组数据的第一个索引号; 2 => 10第二组数据的第一个索引号
				let list = (this.pageNum -1)*this.pageSize; //拿到新一组的索引
				// 获取每组所需要的5条数据
				// slice(开始索引号，截取多少个长度)
				this.pageNumber = this.paging.slice(list, list+this.pageSize)

			},
			pravPage(){ //上一页
				if(this.pageNum != 1){
					this.pageNum --;
					this.page(this.pageNum)
				}
			},
			nexTpage(){ //下一页
				if(this.pageNum < this.pageCount){
					this.pageNum ++;
					this.page(this.pageNum)
				}
			}
		}
	})
</script>
